<template>
  <div class="msgLoginContainer">
      <!-- 顶部返回 -->
      <div class="topBar"><p @click="back()"><yd-icon name="back" class="back"  custom slot="icon" size="18px"></yd-icon></p></div>
      <!-- 图标 -->
      <div class="logo">
          <!-- <i class="phone">&#xe613;</i> -->
          <yd-icon name="phone"  custom slot="icon" class="phone" size="100px"></yd-icon>
      </div>
      <!-- 短信登录 -->
      <div class="login">
          <div class="phoneNum">
                <yd-icon name="pnum"  custom slot="icon"  size=".5rem"></yd-icon>
                <input placeholder="请输入手机号" style="margin-left:.15rem" maxlength="11" v-model="phoneNumber">
               <yd-sendcode slot="right" init-str="发送验证码" run-str="{%s}秒后重试" reset-str="重新获取" v-model="start" type="hollow" @click.native="sendCode" size="small"></yd-sendcode>
          </div>
          <div class="msg">
               <yd-icon name="sure"  custom slot="icon"  size=".4rem"></yd-icon>
              <input placeholder="请输入验证码" maxlength="11" v-model="msgWord">
          </div>
      </div>
      <button class="loginBtn" @touchend="msgLogin">登录</button>
  </div>
</template>
<script>
// import {Icons} from 'vue-ydui/dist/lib.rem/icons'
import  * as types from '@/vuex/types';
export default {
  data() {
        return{
            start: false,//启动关闭短信验证按钮
            phoneNumber:'',//电话号码
            msgWord:''//验证码
        }
        },
        methods: {
            back(){//返回
                this.$router.back()
            },
            sendCode() {//短信倒计时
             let reg=/^[1][3,4,5,7,8][0-9]{9}$/;
              if(!reg.test(this.phoneNumber)){
                    this.$dialog.alert({mes: '请输入正确手机号码'});
                }else{
                   this.$dialog.loading.open('发送中...');
                    setTimeout(() => {
                        this.start = true;
                        this.$dialog.loading.close();
                        this.$dialog.toast({mes: '已发送',icon: 'success',timeout: 1500});
                    }, 1000);
                }

            },
            msgLogin(){//登录
                let data={
                    mobilephone:this.phoneNumber,
                    verifyCode:this.msgWord
                }
                let reg=/^[1][3,4,5,7,8][0-9]{9}$/;//电话号码正则
                    if(!reg.test(this.phoneNumber)){
                            this.$dialog.alert({mes: '请输入正确手机号码'});
                        }else if(this.msgWord.length==0){
                            this.$dialog.alert({mes: '验证码不能为空'});
                        }
                        else{
                             this.ylAjax.msgLogin(data)
                                .then(res=>{
                                   if(res.state==0){
                                       console.log(res)
                                       this.$store.commit(types.LOGIN,res.data.token.token)
                                       localStorage.username = res.data.user.name;//保存用户name
                                        localStorage.myphoto = res.data.user.photo;
                                        this.$store.commit('loginStatus', 0)
                                        this.$router.push({path:"/chat"})
                                        localStorage.myphone = this.phoneNumber//保存用户名密码
                                        localStorage.userid=res.data.user.id;//保存用户ID
                                   }else{
                                        this.$dialog.alert({mes:res.message})
                                   }
                                })
                                .catch(error=>{
                                    throw error
                                })
                        }
            }
        }
}
</script>
<style lang="less" scoped>
 @import '~less/base';
 @import '~less/icon';
 .msgLoginContainer{
     position: fixed;
     top: 0;
     left: 0;
     right: 0;
     bottom: 0;
     background-color: @background-a;
     .topBar{//顶部返回
         height: 1rem;
         line-height: 1rem;
         p{
             width: 20%;
         }
        .back{
         padding: .3rem;
         color: @color-t;
        }
     }
     .logo{//中间logo
        height: 3.3rem;
        line-height: 3.3rem;
        text-align: center;
        .phone{
              color: @color-t;
        }
     }
    .login{
        padding-left: .5rem;
     .yd-btn{
            font-size: 12px;
        }
        // .phoneNum,.msg{
        //     width: 100%;
        //     position: relative;
        //     //  margin-left: 12%;
        // }
        .phoneNum{
             button{//重置按钮样式
                    background-color: transparent;
                    border: none;
                }
        }
        input{
                width: 4.3rem;
                border: none;
                border-bottom: 1px solid @color-border1;
                height: .6rem;
                line-height: .6rem;
                margin-top: .3rem;
                margin-bottom: .3rem;
                margin-right: .2rem;
                margin-left: .25rem  ;
                font-size: 16px;
                padding-left: .2rem;
        }
         img{
            position: absolute;
            left: 0;
            height: .34rem;
            top: .42rem;
        }
    }
       .loginBtn{//登录按钮
            width:89%;
            margin-left: 4.7%;
            border: 1px solid @color-border2;
            height: 1rem;
            background-color: @color-btn1;
            border-radius: 5px;
            margin-top: .6rem;
            color: @color-btnFont;
            font-size: 18px;
            letter-spacing:10px
        }
 }
</style>
